<template>
  <div class="main">
    <div class="body">
      <div class="border_bg">
        <div class="take_notes">
          <div>
            <p class="titl">源记录数</p>
            <p class="zhi">{{ DataTransferConfig.sourceRows }}</p>
          </div>
          <div>
            <p class="titl">已接引记录数</p>
            <p class="zhi">{{ DataTransferConfig.targetRows }}</p>
          </div>
          <div>
            <p class="titl">接引比例</p>
            <p class="zhi">{{ DataTransferConfig.drawScale }}</p>
          </div>
          <div>
            <p class="titl">已治理记录数</p>
            <p class="zhi">{{ GovConfigList.targetRows }}</p>
          </div>
          <div>
            <p class="titl">治理比例</p>
            <p class="zhi">
              {{
                Math.round(
                  (GovConfigList.targetRows / DataTransferConfig.targetRows) *
                    100 *
                    100
                ) /
                  100 +
                "%"
              }}
            </p>
          </div>
          <div>
            <p class="titl">治理问题数</p>
            <p class="zhi">{{ GovLogCount.total }}</p>
          </div>
          <div>
            <p class="titl">治理问题数占比</p>
            <p class="zhi">
              {{
                Math.round(
                  (GovLogCount.total / GovConfigList.targetRows) * 100 * 100
                ) /
                  100 +
                "%"
              }}
            </p>
          </div>
          <div>
            <p class="titl">特征参数提取量</p>
            <p class="zhi">{{ FeatureExtraConfigList.targetRows }}</p>
          </div>
        </div>
      </div>
      <div class="body_main">
        <div class="kuai">
          <div class="border_bg">
            <div class="weizhi">
              <div
                id="Population"
                style="width: 80%; height: 80%; margin: 0 auto"
                class="Population"
              ></div>
            </div>
          </div>
        </div>
        <div class="kuai">
          <div class="border_bg">
            <div class="weizhi">
              <div
                class="ExtraConfigListtu"
                style="width: 80%; height: 80%; margin: 0 auto"
                id="ExtraConfigListtu"
              ></div>
            </div>
          </div>
        </div>
        <div class="kuai">
          <div class="border_bg">
            <div class="weizhi">
              <div
                class="hengkua"
                style="width: 80%; height: 80%; margin: 0 auto"
              >
                <div class="title">数据治理状态</div>
                <div class="heng">
                  <div
                    v-for="(item, index) in GovConfigList.dataList"
                    :key="index"
                    class="dainzhu"
                  >
                    <div class="name">{{ item.dataName }}</div>
                    <div class="zhuzi">
                      <div
                        class="neizhu"
                        :style="{ width: scrollerHeight(item) }"
                      >
                        {{ scrollerHeight(item) }}
                      </div>
                    </div>
                    <div class="zongzhi">
                      <span>
                        共{{ item.sourceRows == null ? 0 : item.sourceRows }}条
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kuai">
          <div class="border_bg">
            <div class="weizhi">
              <div
                class="GovlogCount"
                style="width: 80%; height: 80%; margin: 0 auto"
                id="GovlogCount"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { post } from "../../utils/request";
export default {
  name: "dataStatus",
  data() {
    return {
      DataTransferConfig: {
        //接引配置
        sourceRows: 0, // 源记录数 接引配置中所有 sourceRows 的和
        targetRows: 0, // 已接引记录数 接引配置中所有 targetRows 的和
        drawScale: null, // 源记录数 和 已接引记录数 的比值
      }, // 查询引接配置列表
      GovConfigList: {
        // 治理状态监管
        targetRows: 0, // 已经治理记录数
        dataList: [],
      },
      GovLogCount: {
        total: 0,
      },
      FeatureExtraConfigList: {
        targetRows: 0,
      },
    };
  },
  created() {
    this.init();
  },
  computed: {},
  methods: {
    init() {
      this.getDataTransferConfigList();
      this.getDataGovSchemaList();
      this.getGovLogCount();
      this.getFeatureExtraConfigList();
    },
    getDataTransferConfigList() {
      var params = {
        pageSize: 10,
        pageNum: 1,
      };
      post(
        "/api/idatamanage/dataTransferConfig/queryDataTransferConfig",
        params
      ).then((res) => {
        console.log(res.data.data.dataList);
        let sourceRows = 0;
        let targetRows = 0;
        let linsou = [];
        let lintar = [];
        let linname = [];
        res.data.data.dataList.forEach((element) => {
          linname.unshift(element.tableName);
          console.log(element.tableName);
          if (element.sourceRows) {
            sourceRows += element.sourceRows;
            linsou.unshift(element.sourceRows);
          } else {
            linsou.unshift(0);
          }
          if (element.targetRows) {
            targetRows += element.targetRows;
            lintar.unshift(element.targetRows);
          } else {
            lintar.unshift(0);
          }
        });
        // console.log(targetRows, "接引配置");
        // console.log(sourceRows, "接引配置");
        this.DataTransferConfig.sourceRows = sourceRows;
        this.DataTransferConfig.targetRows = targetRows;
        this.DataTransferConfig.drawScale =
          Math.round(
            (this.DataTransferConfig.targetRows /
              this.DataTransferConfig.sourceRows) *
              100 *
              100
          ) /
            100 +
          "%";
        console.log(this.DataTransferConfig.targetRows);
        this.World_Population(linsou, lintar, linname);
      });
    },
    getDataGovSchemaList() {
      var params = {
        pageSize: 10,
        pageNum: 1,
      };
      post("/api/idatamanage/dataGov/queryGovConfigList", params).then(
        (res) => {
          console.log("res=>", res.data.data.dataList);
          this.GovConfigList.dataList = res.data.data.dataList;
          let targetRows = 0;
          res.data.data.dataList.forEach((element) => {
            if (element.targetRows) {
              targetRows += element.targetRows;
            }
          });
          this.GovConfigList.targetRows = targetRows;
          console.log(targetRows, "治理状态监管");
        }
      );
    },

    getGovLogCount() {
      var params = {};
      post("/api/idatamanage/dataGov/queryGovLogCount", params).then((res) => {
        console.log(res.data.data, "问题清单");
        let data = [];
        let zhi = ["一致性", "完整性", "准确性", "有效性", "唯一性"];
        res.data.data.forEach((item) => {
          this.GovLogCount.total += item.total;
        });
        for (let i = 0; i < zhi.length; i++) {
          data.push({
            value: 0,
            name: zhi[i],
          });
          res.data.data.forEach((item) => {
            if (item.checkType == i) {
              data[i].value = item.total;
            }
          });
        }
        console.log(data, "lisn");
        this.GovlogCount(data);
      });
    },

    getFeatureExtraConfigList() {
      var params = {
        pageSize: 10,
        pageNum: 1,
      };
      post("/api/idatamanage/dataGov/queryFeatureExtraConfigList", params).then(
        (res) => {
          console.log(res.data.data.dataList, "特征参数提取");
          let lintarg = [];
          let linname = [];
          res.data.data.dataList.forEach((item) => {
            if (item.targetRows) {
              lintarg.push(item.targetRows);
              linname.push(item.name);
              this.FeatureExtraConfigList.targetRows += item.targetRows;
            }
          });
          this.ExtraConfigListtu(linname, lintarg);
        }
      );
    },
    GovlogCount(data) {
      var chartDom = document.getElementById("GovlogCount");
      var myChart = this.$echarts.init(chartDom, "dark");
      var option;

      option = {
        title: {
          text: "治理问题",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    ExtraConfigListtu(linname, lintarg) {
      var chartDom = document.getElementById("ExtraConfigListtu");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "特征参数提取",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: linname,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: lintarg,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    World_Population(linsou, lintar, linname) {
      var chartDom = document.getElementById("Population");
      var myChart = this.$echarts.init(chartDom);
      var option;

      let rotate = [];
      for (let i = 0; i < lintar.length; i++) {
        rotate.push(lintar[i] / linsou[i]);
      }

      option = {
        title: {
          text: "数据接引状态",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          //   type: "value",
          //   boundaryGap: [0, 0.01],
          type: "category",
          data: linname,
          axisLabel: {
            show: true,
            rotate: 10,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },

          // axisLabel: {
          //   interval: 0,
          //   formatter: function (value) {
          //     //x轴的文字改为竖版显示
          //     var str = value.split("");
          //     return str.join("\n");
          //   },
          // },
        },
        yAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "完成率",
            type: "bar",
            data: rotate,
          },
          // {
          //   name: "sourceRows",
          //   type: "bar",
          //   data: linsou,
          // },
          // {
          //   name: "targetRows",
          //   type: "bar",
          //   data: lintar,
          // },
        ],
      };

      option && myChart.setOption(option);
    },
    scrollerHeight(item) {
      console.log(item, "数据治理状态");
      let arr = null;
      if (item.targetRows && item.targetRows) {
        arr =
          Math.round(
            ((item.targetRows == null ? 0 : item.targetRows) /
              (item.sourceRows == null ? 0 : item.sourceRows)) *
              100 *
              100
          ) /
            100 +
          "%";
      } else {
        arr = "0%";
      }
      console.log(arr);
      return arr;
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.take_notes {
  display: flex;
  align-items: center;
  justify-content: space-around;
  div {
    margin: 35px 0;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .titl {
      color: #00d0ff;
    }
    .zhi {
      font-size: 25px;
      color: #ffffff;
    }
  }
}
.main {
  // 最外层的盒子
  font-family: "宋体";
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.body {
  width: 97%;
  height: 89%;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border: 1px solid #0077a9;
  padding: 5px;
}
.body_main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 6px;
  .kuai {
    width: 49.7%;
    height: 30vh;
    padding: 5px 0;
    .weizhi {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .Population {
      margin: 50px;
    }
    .dainzhu {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .hengkua {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .title {
        font-size: 18px;
        font-weight: 900;
        color: white;
      }
      .heng {
        height: 85%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .zongzhi,
        .name {
          color: white;
        }
        .zongzhi {
          margin-left: 10px;
          width: 100px;
        }
        .name {
          width: 190px;
        }
        .zhuzi {
          width: 55%;
          height: 15px;
          background: rgba($color: #043251, $alpha: 0.8);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .neizhu {
            height: 100%;
            width: 0%;
            text-align: center;
            color: #ffffff;
            background: linear-gradient(to right, #00d5ff 0%, #0073fb 100%);
          }
        }
      }
    }
  }
}
.border_bg {
  height: 100%;
  border: 1px solid #0077a9;
  background: #000;
}
</style>